<template>
  <div class="page">
    <!-- 搜索区域 开始 -->
    <div class="el_card_box">
      <el-form :inline="true" size="small" :model="formInline" class="search_form">
        <el-form-item label="广告代号：">
          <!-- <el-select v-model="formInline.adSource" filterable>
            <el-option v-for="(item,index) in adCodeList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select> -->
          <el-input v-model="formInline.adCode" placeholder="请输入广告代号"></el-input>
        </el-form-item>
      </el-form>
      <div class="search_btn_box">
        <el-button type="primary" size="small" @click="getList()">筛选</el-button>
        <el-button type="default" size="small" @click="rest">清空筛选</el-button>
      </div>
    </div>
    <!-- 搜索区域 end -->

    <!-- 表格 开始 -->
    <div class="table_box">
      <!-- 操作区域 开始 -->
      <div class="action_box">
        <el-button type="primary" size="small" @click="openDialog()">新增代号</el-button>
        <el-button type="default" size="small" @click="dowloadExcelFile" :loading="eloading">导出全部代号</el-button>
      </div>
      <!-- 操作区域 end -->

      <el-table ref="elTable" class="el_table" size="small" :data="tableData">
        <el-table-column prop="code" label="广告代号" show-overflow-tooltip />
        <el-table-column prop="channelSource" label="客户来源" show-overflow-tooltip />
        <el-table-column prop="createdDate" label="创建时间" show-overflow-tooltip />
         <el-table-column prop="customerCnt" label="客户数量" show-overflow-tooltip />
        <el-table-column prop="orderNum" label="排序" show-overflow-tooltip />
        <el-table-column prop="settleRegisterCnt" label="操作" width="120">
          <template slot-scope="{row}">
            <el-link type="primary" class="el_link" :underline="false" @click="openDialog('showDialog',row)">编辑</el-link>
            <el-link type="danger" class="el_link" :underline="false" @click="remove(row)">删除</el-link>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination_list">
        <el-pagination background layout="sizes, total,prev, pager, next, jumper" :total="pageTotal" :page-size="pageSize" :page-sizes="pageSizes" :current-page.sync="pageNumber" @current-change="getList" @size-change="changePageSize" />
      </div>
    </div>
    <!-- 表格 end -->

    <!-- 新增来源 开始 -->
    <glsx-dialog :show="showDialog" :title="dialogTitle">
      <el-form :model="addForm" ref="addForm" :rules="addFormRules" label-width="100px">
        <el-form-item label="来源名称：" prop="csId">
          <el-select v-model="addForm.csId" class="a_select">
            <el-option v-for="(item,index) in sourceList" :key="index" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="代号名称：" prop="name">
          <el-input v-model="addForm.name" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="排序：" prop="orderNum">
          <!-- <el-input v-model="addForm.orderNum" placeholder="数字越大，排名越前"></el-input> -->
          <el-input-number v-model="addForm.orderNum" :controls="false" class="a_input" placeholder="数字越大排名越前"></el-input-number>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="small" :loading="aloading" @click="saveInfo">保存</el-button>
        <el-button type="default" size="small" @click="closeDialog()">取消</el-button>
      </div>
    </glsx-dialog>
    <!-- 新增来源 end -->

  </div>
</template>
  
  <script>
import {
  GETADSOURCESEARCH,
  GETCHANNELSOURCEOPTIONS,
  ADDADSOURCE,
  GETADSOURCEINFO,
  EDITADSOURCE,
  DELETEADSOURCE,
  GETADSOURCEOPTIONS,
  ADSOURCEEXPORT
} from "@/http/system";
import { showToast, showModal, deepClone } from "@/common/util";
import GlsxDialog from "@/components/Dialog/index";
import { exportExcel } from "@/common/common";
export default {
  name: "BookPage",
  props: {
    status: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    GlsxDialog,
  },
  data() {
    return {
      formInline: {},
      tableData: [],
      pageTotal: 0,
      pageNumber: 1,
      pageSizes: [10, 20, 50, 100],
      pageSize: 20,
      showDialog: false,
      loading: false,
      addForm: {},
      addFormRules: {
        csId: [
          { required: true, message: "请选择来源名称", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入来源名称", trigger: "blur" }],
        orderNum: [{ required: true, message: "请输入排序", trigger: "blur" }],
      },
      current: {},
      dialogTitle: "新增代号",
      sourceList: [],
      aloading: false,
      adCodeList:[],
      eloading:false
    };
  },
  mounted() {
    this.getList();
    this.getSource();
    this.getAdCodeList()
  },
  methods: {
    /** 重置 */
    rest() {
      this.formInline = {};
      this.orderTime = [];
      this.getList();
    },

    /** 每页展示 */
    changePageSize(e) {
      this.pageSize = e;
      this.getList();
    },

    /** 获取参数 */
    getParams() {
      let oParams = JSON.parse(JSON.stringify(this.formInline));
      let n = this.orderTime;

      if (n && n.length > 0) {
        oParams.sDate = n[0];
        oParams.eDate = n[1];
      }

      oParams.pageSize = this.pageSize;
      return oParams;
    },

    /** 获取列表 */
    getList(current) {
      let _this = this;
      let oParams = this.getParams();
      oParams.pageNumber = current || this.pageNumber;
      GETADSOURCESEARCH(oParams).then((res) => {
        let obj = res.data || {};
        _this.tableData = obj.list || [];
        _this.pageTotal = obj.totalElements;
      });
    },

    // 打开弹框
    openDialog(id, row) {
      let title = "新增代号";
      this[id || "showDialog"] = true;
      if (row) {
        this.dialogTitle = "编辑代号";
        this.current = row;
        this.getInfo(row);
      }
    },

    // 关闭弹框
    closeDialog(id) {
      this[id || "showDialog"] = false;
      this.dialogTitle = "新增代号";
      this.current = {};
      this.$refs.addForm.clearValidate();
    },

    // 新增来源
    saveInfo() {
      let _this = this;
      console.log(_this.$refs);
      _this.aloading = true;
      _this.$refs.addForm.validate((valid) => {
        if (!valid) {
          _this.aloading = false;
          return false;
        }

        let oParams = deepClone(_this.addForm);

        // 编辑
        if (oParams.id) {
          EDITADSOURCE(oParams).then((res) => {
            _this.aloading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.getList();
              _this.closeDialog();
            }
          });
          return false;
        }

        // 新增
        ADDADSOURCE(oParams).then((res) => {
          _this.aloading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.getList();
            _this.closeDialog();
          }
        });
      });
    },

    // 删除
    remove(row) {
      let _this = this;
      showModal({
        message: "确认删除该广告代号吗？",
        showCancelButton: true,
        success: () => {
          DELETEADSOURCE({ id: row.id }).then((res) => {
            if (res.code == 200) {
              showToast({
                message: "删除成功",
                type: "success",
              });
              _this.getList();
            }
          });
        },
      });
    },

    // 获取来源列表
    getSource() {
      GETCHANNELSOURCEOPTIONS().then((res) => {
        this.sourceList = res.data || [];
      });
    },

    // 获取广告信息
    getInfo(row) {
      GETADSOURCEINFO({ id: row.id }).then((res) => {
        this.addForm = res.data || {};
      });
    },

    // 获取广告代号
    getAdCodeList(id) {
      GETADSOURCEOPTIONS().then((res) => {
        this.adCodeList = res.data || [];
      });
    },

    // 下载excel
    dowloadExcelFile(){
      let _this = this;
      let oParams = this.getParams();
      let options = {};
      options.method = "GET";
      options.data = oParams;
      options.url = ADSOURCEEXPORT;
      options.fileName = "广告代号.xlsx";
      _this.eloading = true;
      exportExcel(options).then((res) => {
        _this.eloading = false;
      });
    },

  },
};
</script>
  
<style lang="scss" scoped>
.a_input,
.a_select {
  width: 240px;
}
@import "@/assets/style/customer/index.scss";
</style>
  